function Gellary(id, option) {
  //找到容器
  let container = document.getElementById(id)
  let ct = container.children
  //设置类样式
  if (container.className.indexOf('gellary') === -1) {
    container.className += ' gellary'
  }
  //判断矩阵的个数和元素的个数是否相等
  let flag = option.width && option.height && option.width * option.height !== ct.length
  if (flag) {
    throw 'width and height does not match children length'
  }
  //准备参数
  let defaulteOption = {
    defaultWidth: 130,
    defaultHeight: 40,
    activeHeight: 400,
    activeWidth: 340,
    animateDuration: 300,
  }
  //合并参数给option
  option = Object.assign({}, defaulteOption, option)
  //动态设置容器的宽度
  container.style.width = (option.width - 1) * option.defaultWidth + option.activeWidth + 'px'
  //声明时间的起点
  let lastRuntime = new Date(0)
  let runId = 0
  //声明激活图片的函数
  let activePicture = function (index) {
    /**
     * 此处控制激活图片的动作是在transition过渡结束后开始执行
     * 避免出现，图片卡顿现象
     */
    if (runId) {
      clearTimeout(runId)
    }
    let currentTime = new Date()
    if (currentTime - lastRuntime < option.animateDuration) {
      runId = setTimeout(function () {
        activePicture(index)
      }, option.animateDuration)
      return
    }
    lastRuntime = currentTime
    //转换当前激活的元素的下标为坐标
    let cx = index % option.width
    let cy = Math.floor(index / option.width)
    console.log(cx, cy)
    //遍历所有的坐标(x,y)，把坐标转换成下标index
    for (let x = 0, xl = option.width; x < xl; x++) {
      for (let y = 0, yl = option.height; y < yl; y++) {
        //把坐标转换成下标
        let cindex = y * option.width + x
        //遍历所有元素
        let item = ct[cindex]
        if (cx === x && cy === y) {
          item.className = 'active'
          item.style.width = option.activeWidth + 'px'
          item.style.height = option.activeHeight + 'px'
        } else if (cx === x) {
          item.className = ''
          //和当前激活元素在同列的其它元素的样式
          item.style.width = option.activeWidth + 'px'
          item.style.height = option.defaultHeight + 'px'
        } else if (cy === y) {
          item.className = ''
          //和当前激活元素在同行的其它元素的样式
          item.style.width = option.defaultWidth + 'px'
          item.style.height = option.activeHeight + 'px'
        } else {
          item.className = ''
          item.style.width = option.defaultWidth + 'px'
          item.style.height = option.defaultHeight + 'px'
        }
      }
    }
  }
  //初始化第一张图片激活
  activePicture(0)
 
  //给每个div绑定事件
  for (let i = 0; i < ct.length; i++) {
    ct[i].addEventListener('mouseenter', function () {
      activePicture(i)
    })
  }
 
  // Array.prototype.forEach.call(ct, function (item, index) {
  //   item.addEventListener('mouseenter', function () {
  //     activePicture(index)
  //   })
  // })
 
  return { active: activePicture }
}